import React from 'react';
import { inject, observer } from 'mobx-react';
import {
  Row,
  Col,
  Spin,
} from 'antd';
import { toJS } from 'mobx';
import {
  WeaEchart,
  WeaRadioGroup,
  WeaLocaleProvider,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
@inject('docCatalogStore')

@observer
class CatalogContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      condition: { // 默认搜索条件
        doccreatedateselect: '7',
        doccreatedatefrom: '',
        doccreatedateto: '',
        categoryType: '0',
        category_id: '',
      },
      option: {
        xAxis: {
          data: this.props.xdata || [],
          axisLine: { lineStyle: { color: '#B2B2B2' } },
          splitLine: {
            show: true,
            lineStyle: { color: ['#B2B2B2'] },
            interval: (number) => {
              if (number === 0) {
 return true; 
} return false;
            },
          },
          axisTick: {
            lineStyle: { color: '#B2B2B2' },
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#333333',
            },
            formatter(value) {
              if (value.lastIndexOf('/') === -1) {
 return value; 
}
              return value.substring(value.lastIndexOf('/') + 1, value.length);
            },
          },
        },
        yAxis: {
          axisLine: { lineStyle: { color: '#B2B2B2' } },
          axisLabel: {
            index: 0,
            textStyle: {
              color: '#333333',
            },
          },
          splitLine: {
            show: false,
          },
        },
        grid: {
          left: 50,
          right: 0,
          borderColor: '#c5c5c5',
        },
        color: ['#00A9FF'],
        series: [
          {
            name: getLabel(31626, '文档数量'),
            type: 'bar',
            data: this.props.ydata || [],
            barWidth: '50%',
            barGap: '10',
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
      },
    };
  }
  componentDidMount() {
  }
  componentWillReceiveProps(nextProps) {
    let { option } = this.state;
    if (this.props.xdata !== nextProps.xdata) {
      option.xAxis.data = nextProps.xdata;
    }
    if (this.props.ydata !== nextProps.ydata) {
      option.series[0].data = nextProps.ydata;
    }
    if (this.props.xdata !== nextProps.xdata || this.props.ydata !== nextProps.ydata) {
      if (nextProps.xdata.length !== 0) {
        option.xAxis.show = true;
      } else {
        option.xAxis.show = false;
      }
      if (nextProps.ydata.length !== 0) {
        option.yAxis.show = true;
      } else {
        option.yAxis.show = false;
      }
      this.setState({ option });
      if (this.refs && this.refs.chart) {
        this.refs.chart.paint();
      }
    }
  }
  componentWillUnmount() {
  }
  getDatas = (conditions) => {
    const { docCatalogStore } = this.props;
    const { getCategoryNum, getDocNum, getMostCategory
      , getReportData } = docCatalogStore;
    getCategoryNum(conditions);
    getDocNum(conditions);
    getMostCategory(conditions);
    getReportData(conditions);
    this.setState({ condition: conditions });
  }
  render() {
    const { docCatalogStore, xdata, ydata } = this.props;
    const { conditions, categoryNum
      , docNum, mostCategory, reportData
      , loadingChart, loadingCN, loadingDN, loadingMC } = docCatalogStore;
    const { option, condition } = this.state;
    const dateCom = (() => {
      let date = new Date();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      return `${date.getFullYear()}-${month}-${day}`;
    })();
    const tipCom = (() => {
      if (xdata.length === 0 || ydata.length === 0) {
          return (
            <div className="count-charts-img">
              <img src={'/spa/document/images/noreport.png'} />
              <div className="count-charts-text wea-f14">{getLabel(384202, '暂无报表')}</div>
            </div>
          );
      }
    })();
    const categoryNums = toJS(categoryNum);
    const docNums = toJS(docNum);
    const mostCategoryData = toJS(mostCategory);
    return (
      <div className="count">
        <div className="count-condition">
          <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@otg8u2`} config={toJS(conditions)}
            onChange={
            (params) => {
              if (params.categoryType && params.categoryType === '1' && (!params.category_id)) {
              } else if (params.doccreatedateselect && params.doccreatedateselect === '6'
                && ((!params.doccreatedatefrom) && (!params.doccreatedateto))) {
              } else {
                for (let item in params) {
                  condition[item] = params[item];
                }
                this.getDatas(condition);
              }
            }}
            beforeInit={
              (a, b, c) => {
                c(b);
                }
            }
          />
        </div>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@2yy502`} spinning={loadingCN || loadingDN || loadingMC || loadingChart}>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ya1ljr`} className="count-container">
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ys2905`} lg={6} md={6} sm={5} xs={5} className="count-col">
              <span className="icon-coms-hrm count-icon-hrm" />
              {
              	categoryNums.length !== 0 && docNums.length !== 0
              		&& mostCategoryData.length !== 0 && (
			              <ul>
			                <li>{categoryNums.show}</li>
			                <li>{categoryNums.data && categoryNums.data[0].num}</li>
			              </ul>
              		)
              }
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@hs6xpg`} lg={6} md={6} sm={5} xs={5} className="count-col">
              <span className="icon-coms-doc count-icon-doc" />
              {
              	categoryNums.length !== 0 && docNums.length !== 0
              		&& mostCategoryData.length !== 0 && (
			              <ul>
			                <li>{docNums.show}</li>
			                <li>{docNums.data && docNums.data[0].num}</li>
			              </ul>
              		)
              }
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ipy4c1`} lg={12} md={12} sm={14} xs={14} className="count-col">
              <span className="icon-coms-Catalog count-icon-Catalog" />
              {
              	categoryNums.length !== 0 && docNums.length !== 0
              		&& mostCategoryData.length !== 0 && (
			              <ul>
			                <li>{mostCategoryData.show}</li>
			                <li title={mostCategoryData.data && mostCategoryData.data[0].subcategory}>{mostCategoryData.data && mostCategoryData.data[0].subcategory}</li>
			              </ul>
              		)
              }
            </Col>
          </Row>
          <div className="count-container">
            {
              xdata.length !== 0 && ydata.length !== 0 && (
                <div className="count-charts-title">
                  {toJS(reportData) && toJS(reportData).show}
                </div>
              )
            }
            {!loadingChart && tipCom}
            <div className="count-charts">
              <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@p7b9ws`} ref={'chart'} chartName={''} option={option} useDefault />
            </div>
          </div>
        </Spin>
        <div className="count-bottom">{getLabel(382151, '本报表数据统计截止到：')}{dateCom}</div>
      </div>
    );
  }
}

export default CatalogContent;
